<template>
    <div class="body-color">
        <Header></Header>
        <Banner  @searchInfoAddress="handleSearch"></Banner>
        <div class="container-fluid t-body">
            <span class="t-title">Address:  {{inputValue}}</span>
            <div class="body">
                <div class="tb-header">
                 <div>
                    <div>More than {{pageCount}} transactions found</div>
                    <span class="no-flex">（Showing the last {{transactionArray.length}} article）</span>
                </div>
                 <div class="page-box">
                     <span class="page-button" @click="first()">First</span>
                    <span class="page-button" @click="jian()">&lt;</span>
                    <span class="page-button">Page {{startPage}} of {{Math.ceil(pageCount/this.pageSize)}}</span>
                    <span class="page-button " @click="isButtonDisabled()"  :style="{ 'pointer-events': last ? 'none' : 'auto' }" >&gt;</span>
                    <span class="page-button " @click="lasts()" :style="{ 'pointer-events': last ? 'none' : 'auto' }">Last</span>
                </div>
                </div>
                
                <div class="tb-body">
                    <table class="table">
                        <tr>
                            <th class="th-one">Txn Hash</th>
                            <th>Method</th>
                            <th>Block</th>
                            <th>Age</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Value</th>
                            <th>Txn Fee</th>
                        </tr>
                        <tr v-for="(item,index) in transactionArray" :key="index+1">
                            <td class="td-one" @click="goToTransactionInfo(item)">{{item.hash.slice(0,13)}}....</td>
                            <td style="color:#212529">Transfer</td>
                            <td class="block-num" @click="goToBlockInfo(item)">{{item.blockNumber}}</td>
                            <td style="color:#212529">{{getTimeDifference(item.timestamp)}}</td>
                            <td class="from" @click="goToFromAddressIfo(item)">{{formatString(item.from)}}</td>
                            <td class="to" @click=" goToAddressIfo(item)">{{formatString(item.to==""?"null":item.to)}}</td>
                            <td class="values" style="color:#212529">{{item.value}} ROCKET</td>
                            <td style="color:#212529">{{item.gasPrice*item.gas}} </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>

import '@/assets/css/TransactionsAddress.css';
import {getTransactionAddress} from '@/api/home.js';
import Banner from '@/components/Banner.vue';
export default {
  components: { Banner },
    name: 'Transactions',
    data(){
          return {
             transactionArray:[],
             pageCount:"",
             startPage:1,
             last:false,
             firsts:false,
             pageSize:30,
             inputValue:""
        }
    },


   methods:{


  handleSearch(query) {
      // 在这里实现搜索逻辑
      this.inputValue=query
      this.onLoadTransaction();
      // 比如调用一个API或者过滤一个列表
    },
  


   goToAddressIfo(item){
   this.inputValue=item.to;
      this.onLoadTransaction();
   },
   
    goToFromAddressIfo(item){
  this.inputValue=item.from;
      this.onLoadTransaction();
  },
  

  goToBlockInfo(item){
    this.$router.push({name:'blockInfo',params:{blockId:0,inputValue:item.blockNumber},query:{ts:Date.now()}})
  },

    goToTransactionInfo(item){
    this.$router.push({name:'transactionInfo',params:{inputValue:item.hash}})
  },

    isButtonDisabled(){
       if(this.startPage<Math.ceil(this.pageCount/this.pageSize)){
        this.startPage++;
          this.onLoadTransaction();
            }else{
             this.last=false;
             this.firsts=true;
         }
   },
    lasts(){
    if(this.startPage<Math.ceil(this.pageCount/this.pageSize)){
        this.startPage=Math.ceil(this.pageCount/this.pageSize)
          this.onLoadTransaction();
          this.last=false;
            }else{
             this.firsts=true;
         }
   },

    jian(){
     if(this.startPage>1){
        this.startPage--;
          this.onLoadTransaction();
            }else{
            this.last=false;
            this.firsts=true;
         }
    },

    first(){
    if(this.startPage>1){
         this.startPage=1
         this.onLoadTransaction();
    }else{
       this.firsts=false;
       this.last=true;
    }
   },

    async onLoadTransaction(){
      const res=await getTransactionAddress({
        cursor:(this.startPage-1)*this.pageSize,
        ps:this.pageSize,
        address:this.inputValue
       })
       this.pageCount=res.data.count
     this.transactionArray=res.data.transactionsInfo
   },
    formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 8)}....${str.substr(-8)}`;
      }
    },


    getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },
    
},

    created(){
        this.inputValue = this.$route.params.inputValue;
         this.onLoadTransaction();
    }

    



    
}
</script>

<style>
.body-color{
  background-color: rgb(0, 0, 0);
  }
</style>